<template>
    <div class="tel-sec">
        <p class="tel-title">您可以在线咨询置业顾问:</p>

        <div class="tel-btn" @click="contactCounselor">
            <img :src="`${serverUrl}button_online.png`" alt="">
        </div>
        <div class="tel-sec1">
            <input type="tel" v-model="phone" placeholder="您的手机号"/>
            <div class="btn text-center" @click="getVerifyFn">{{verifyText}}</div>
        </div>
        <div class="tel-sec1">
            <input type="tel" placeholder="填写验证码" v-model="verify"/>
            <div class="btn text-center" @click="submit">提交</div>
        </div>
        <p class="liudian">您也可以留电，置业顾问会第一时间联系您</p>

        <img :src="tfbContent1.appQrCode" class="code-img" v-if="tfbContent1.appQrCode"/>
        <p class="text-center text-code" v-if="tfbContent1.appQrCode">扫描下载项目APP</p>
        <div class="projectNmae">
            <p class="text-center text-adr">项目地址：{{tfbContent1.address}}</p>
            <p class="text-center text-adr">开发商：{{tfbContent1.owner}}</p>
        </div>
        <div class="tel-bot">
            <div class="tel-main">
                <div class="coun-btn">
                    <a v-on:click="trackTel" :href="'tel:'+tfbContent1.telephone" :style="`background: url(${serverUrl}button_phone.png) center  center no-repeat/2.4rem .7rem`">
                    </a>
                </div>
            </div>
            <div class="edite-code">
                <!--<img :src="content.finalImg== undefined||content.finalImg=='' ?'http://skyforest.static.elab-plus.com/detail/defaultCode.png':content.finalImg"/>-->
                <div class="code-title">
                    <p class="title">本资料提供的所有文字、图片、视频数据仅供参考，</p>
                    <p class="sub-title">最终以政府批准文件及双方签订的买卖合同为准</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import util from "../utils/util";
import ubt from '../utils/ubt.js'
import  system from "../utils/system.js"
import configMes from '../utils/configMes.js'
import {previewService} from '@/services'
import { Toast } from "mint-ui";
import _ from 'lodash'
import queryString from 'query-string'
const parsed = queryString.parse(location.search);
const code = parsed.code || null;
    export default {
        data() {
            var serverUrl="http://skyforest.static.elab-plus.com/temp/template7/";
            return {
                serverUrl:serverUrl,
                templateContentId:'',
                phone:'',//手机号
                //title:'投放宝',
                customerId:'',//在线顾问跳转变量
                isSend:'', //是否跟顾问聊过天
                verifyText:'获取验证码',//验证码文案
                templateId:'',//模板ID
                imgUrl:'',//空白模板图片
                templateType:'',//模板类型
                verify:'',//验证码
                channel:'',//渠道
                isMini:false,//是否为小程序环境
                sharerImage:'',//二维码
                sendingCode:false,//控制验证码
                submitFlag:false,//防止多次提交
                appcodeImg:'',//底部二维码
                //codeFlag:true,//底部二维码显示控制
                source:4,//来源
                //content:{},//模板内容
                uid:'',//uid
                sessionId:'',//sessionId
                phone:'',//手机号
                platform:4,//渠道来源
                tmpprojectId:'',
                trueProjectId:'',
                keyvalue:'tfb.laypoint.page.enter',//埋点 key值
            }
        },
        mounted() {
            this.sharerImage = this.$route.query.sharerImage||'';
            this.channel = this.$route.query.fromChannel||'';
            this.templateContentId = this.$route.query.templateContentId;
            this.trueProjectId = this.$route.query.projectId||'';
            this.uid=configMes.getUuid();
            if(sessionStorage.getItem('sid')){
                this.sessionId=sessionStorage.getItem('sid');
            }else{
              sessionStorage.setItem('sid',new Date().getTime());
                this.sessionId=sessionStorage.getItem('sid');
            }

            if(localStorage.getItem('uid')){
                this.uid=localStorage.getItem('uid');
            }else{
              localStorage.setItem('uid', configMes.getUuid());
                this.uid=localStorage.getItem('uid');
            }
            console.log(this.tfbContent1.houseId,'jjj')
            this.customerId = localStorage.getItem('localCustomerId'+this.tfbContent1.houseId);
            this.isSend = localStorage.getItem(this.customerId+'&isSendMsg'+this.tfbContent1.houseId);
            // if(this.tfbContent1.projectId){//绑定小程序
            //     this.source = 3;
            // }
            if(system.isIosApp()){
                this.source = 1;
            }
            if(system.isAndroidApp()){
                this.source = 2;
            }
            console.log('--------------------',this.tmpprojectId,'=========')
        },
        updated(){

        },
        computed:{
            tfbContent1(){
                return this.$store.state.tfbContent1;
            },
            // appQrcode(val){
            //     this.appcodeImg = val;
            // },
            // source(val){
            //     this.sourceFlag = val;
            // },
            // telephone(val){
            //
            //     this.telephone = val;
            // },
            // id(val){
            //     this.id=val
            // },
            // houseId(val){
            //     this.houseId=val
            // }

        },
        created(){
            wx.miniProgram.getEnv((res)=> {
                if(res.miniprogram){
                    this.isMini = true
                }
            })
            //util.setTitle(this.title);
            console.log(this.uid,'-----',this.sessionId)
            if(this.sendingCode){
                this.getVerifyFn();
            }

            if(this.isMini){//小程序
                this.source = 3;
            }else{
                this.source = 4;
            }
        },
        // props:{
        //     telephone:String,
        //     content:Object,
        //     id:null,
        //     appQrcode:String,
        //     projectId:null,
        //     houseId:null,
        // },
        methods: {
             async verifyCodeFn(){//验证码
                let data = {
                    sms_mobile: this.phone,
                    sms_template: 'verification.code',
                    sms_code: this.tfbContent1.houseId==109 ? 'SMS_004' : 'SMS_002',
                    sms_type: '1',
                    sms_params: '{"":""}'
                };
                console.log('---验证码---',data)
                let result = await previewService.verifyCode(data);
                if(result.data.success){
                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{
                    Toast(result.data.message)
                }
            },
            async checkVerifyCodeEffective(){// 校验验证码
                if(this.submitFlag){
                    return;
                }
                let data = {
                    mobile: this.phone,
                    type: 'verification.code',
                    verifycode: this.verify
                };
                console.log('---校验验证码---',data)
                let result = await previewService.checkVerifyCodeEffective(data);
                if(result.data.success){
                    this.submitFlag = true;
                    this.telData();
                    this.layPointFn();
                    Toast('提交成功')
                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{
                    this.submitFlag = false;
                    Toast(result.data.message)
                }
            },
            async telData(){//留电
                let data = {
                    houseId: this.tfbContent1.houseId,
                    customerMobile: this.phone,
                    sharerImage: this.sharerImage,
                    channel:this.channel,
                    platForm:this.platform,
                    refer:location.href
                };

                let result = await previewService.telData(data);
                if(result.data.success){
                    Toast('提交成功')
                    //ubt.trackEvent(this.$route.meta.pageid, 'sfc.tfb.h5.codetation.appointment', '', '', 'appointment', 'click', this.title,'','','','','',this.$route.query.fromChannel,this.phone);
                }else{
                    Toast(result.data.message);
                }
            },
            async layPointFn(val){//进入页面埋点

                let data = {
                    projectId:this.tmpprojectId||this.tfbContent1.projectId,
                    system:this.source,
                    tfbContentId:this.tfbContent1.id,
                    uid:this.uid,
                    version:"1.0",
                    sessionId:this.sessionId,
                    source:this.source,
                    mobile:this.phone,
                    keyvalue:this.keyvalue
                }
                //console.log(data,'//////////////')
                let result = await previewService.layPoint(data);
                console.log(result,'dasdsadasdsad')
                // if(result.data.success){
                //     if(val==1){
                //         Toast('提交成功')
                //     }
                // }else{
                //     if(val==1){
                //         Toast(result.data.message)
                //     }

                // }
                //console.log(result,'---------根据项目ID获取模板内容---------',JSON.parse(result.data.single.content))
            },

            getVerifyFn() {
                let vm = this;
                if (this.sendingCode) {
                    return;
                }

                if (!this.phone) {
                    Toast('请输入手机号');
                    return;
                }

                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }
                this.sendingCode = true;
                this.verifyCodeFn();
                let time = 60;
                vm.verifyText = time + 's';
                vm.timer1 = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                        vm.verifyText = time + 's';
                    } else {
                        vm.sendingCode = false;
                        vm.verifyText = '获取验证码';
                        clearInterval(vm.timer1);
                    }
                }, 1000)


            },
            submit(){

                let vm = this;

                if (!vm.phone) {
                    Toast('请输入手机号');
                    return;
                }
                if (!/^1\d{10}$/.test(this.phone)) {
                    Toast('输入的手机号不合法');
                    return;
                }

                if (!vm.verify) {
                    Toast('请输入验证码');
                    return;
                }
                this.keyvalue = 'tfb.laypoint.leavephone.sendverifycode.click';
                //this.layPointFn(1);
                if(this.submitFlag){
                    Toast('已经提交')
                    return;
                }
                this.checkVerifyCodeEffective();
            },
            trackTel(){//电话咨询
                this.keyvalue = 'tfb.laypoint.concat.tel.click';
                this.layPointFn();
            },
            contactCounselor(){
                this.keyvalue = 'tfb.laypoint.im.click';
                this.layPointFn();
                if(this.isMini){
                    wx.miniProgram.navigateTo({url:'../counselorList/counselorList'})
                    return
                }
                let param = {pathName:this.$route.name,templateContentId:this.$route.query.templateContentId,projectId:this.$route.query.projectId,templateCode:this.$route.query.templateCode,houseid:this.$store.state.tfbContent1.houseId,sharerImage:this.$route.query.sharerImage,channel:this.$route.query.channel};
                console.log(param,'op')
                console.log(this.isSend,this.customerId,'ooo')
                if(this.isSend&&this.customerId){
                    this.$router.push({ name: "messageList",query:param});
                }else{
                    this.$router.push({ name: "AdviserList" ,query:param});
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .tel-sec{
        padding:.6rem;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        background: #3D3D3D;
        .tel-title{
            font-family: PingFangSC-Regular;
            font-size: .30rem;
            color: #FFFFFF;
            letter-spacing: .04rem;
            text-align: justify;
            margin: 0.3rem 0;
            }
        .tel-btn{
            padding-bottom:.38rem ;
            border-bottom: 1px solid #999;
            margin-bottom: .4rem;
            img{
                display: block;
                width: 3.7rem;
                height: .9rem;
                margin: 0 auto;
            }
        }
        .tel-sec1{
            margin: .15rem 0;
            overflow: hidden;
            input{
                box-sizing: border-box;
                background: rgba(0,0,0,.2);
                border-radius: .08rem;
                width: 4.5rem;
                height: .8rem;
                font-family: PingFangSC-Medium;
                font-size: .30rem;
                color: #FFFFFF;
                text-align: justify;
                padding-left: .3rem;
                border: none;
                -webkit-appearance: none;
                float: left;
            }
            input ::placeholder{
                opacity: 0.5;
            }
            .text-center{
                box-sizing: border-box;
                background: rgba(0,0,0,.5);
                border-radius: .08rem;
                height: .8rem;
                width: 1.75rem;
                line-height: .8rem;
                font-family: PingFangSC-Semibold;
                font-size: .28rem;
                color: #FFFFFF;
                letter-spacing: 1px;
                text-align: justify;
                display: inline-block;
                padding: 0 .1rem;
                float: right;
                text-align: center;
            }
        }
        .liudian{
            font-family: PingFangSC-Regular;
            font-size: .24rem;
            color: #FFFFFF;
            text-align: justify;
        }
        .code-img{
            width: 2.4rem;
            height: 2.4rem;
            border: 0;
            margin: 0 auto;
            display: block;
            margin-top: .54rem;
        }
        .text-code{
            font-family: PingFangSC-Semibold;
            font-size: .28rem;
            color: #C29D69;
            letter-spacing: .04rem;
            text-align: center;
        }
        .coun-btn{
            a{
                width: 2.4rem;
                height: .7rem;
                display: block;
                margin: 0 auto;
            }
        }
        .projectNmae{
            margin: .4rem 0;
            p{
                opacity: 0.51;
                font-family: PingFangSC-Medium;
                font-size: .28rem;
                color: #FFFFFF;
                text-align: justify;
                line-height: .4rem;
                text-align: left;
            }
        }
        .code-title{
            margin-top: .2rem;
            p{
                line-height: .12rem;
                opacity: 0.39;
                font-family: PingFangSC-Regular;
                font-size: .24rem;
                color: #FFFFFF;
                text-align: center;
            }
        }
    }
</style>
